<template>
	<view>
		<view class="top-menu">
			<u-tabs :list="listData" :current="current" @click="clickTabs" lineColor="#00D26E" :activeStyle="{
			            color: '#00D26E',
						fontSize: '24rpx',
			            fontWeight: 'bold',
			            transform: 'scale(1.05)'
			        }" :inactiveStyle="{
			            color: '#333333',
						fontSize: '24rpx',
			            transform: 'scale(1)'
			        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
			</u-tabs>
		</view>
		<view class="lb-main-32" v-if="listData&&listData[current]">
			<u-empty v-if="listData[current].mgoods.length < 1" mode="data" text="暂无数据"
				icon="/static/empty/data.png"></u-empty>

			<view class="lb-box" v-for="(item,index) in listData[current].mgoods" :key="index">
				<view class="lb-item">
					<view class="lb-left">
						<image :src="getImgUrl(item.goods.cover_image)" mode=""></image>
					</view>
					<view class="lb-right">
						<view class="lb-name">
							{{item.goods.name}}
						</view>
						<view class="lb-ratio">待设计库存：{{item.s_num}}</view>
						<view class="lb-ratio">待设计截止时间：{{item.sign_deadline}}</view>
						<view class="lb-ratio">待使用库存 (自用：{{item.m_num}} 赠送：{{item.g_num}} 销售：{{item.sale_num}})</view>
						<view class="lb-btn">
							<button class="btn" @click="goTo(item,1)">
								赠送
							</button>

							<button class="btn" v-if="item.sale_num" open-type="share" :data-id="item.sid"
								:data-name="item.goods.name" :data-img="item.goods.cover_image" :data-sid="item.sid">
								<image src="/static/icon/share-f.png" mode=""></image>
								销售
							</button>
							<button class="btn" v-else @click="goTo(item,2)">
								销售
							</button>
							<button class="btn" @click="goTo(item,3)">
								自用
							</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mineGoods
	} from "@/api/apis/retail.js"
	import {
		setImgUrl,
		fmtFormat
	} from "@/utils/comm.js"
	export default {
		data() {
			return {
				keyword: '',
				page: 1,
				limit: 10,
				listData: [],
				isLoading: false,
				tabsData: [{
					name: '洗护频道',
				}, {
					name: '丽人美容'
				}, {
					name: '易驾考'
				}, {
					name: '晓牧原'
				}],
				current: 0
			}
		},
		//分享
		//onShareAppMessage 分享给朋友
		//onShareTimeline  分享到朋友圈
		// #ifdef MP
		onShareAppMessage: function(res) {
			let that = this;
			if (res.from === 'button') {
				// 来自页面内转发按钮
				console.log(res.target, '++++')
				console.log(that.user_info, '----')
				let dataset = res.target.dataset;
				let gName = dataset.name;
				let img = setImgUrl(dataset.img);
				let gid = dataset.id;
				let sid = dataset.sid;
				let uid = that.user_info.id;
				let url = '/pages/channel/goods-detail/goods-detail'
				return {
					title: gName,
					imageUrl: img,
					path: url + '?type=4&sid=' + sid + '&uid=' + uid + '&id=' + gid
				}
			}
		},
		onShareTimeline: function(res) {
			let that = this;
			if (res.from === 'button') {
				// 来自页面内转发按钮
				console.log(res.target, '----')
				console.log(that.user_info, '----')
				let dataset = res.target.dataset;
				let gName = dataset.name;
				let img = setImgUrl(dataset.img);
				let gid = dataset.id;
				let sid = dataset.sid;
				let uid = that.user_info.id;
				let url = '/pages/channel/goods-detail/goods-detail'
				return {
					title: gName,
					imageUrl: img,
					path: url + '?type=4&sid=' + sid + '&uid=' + uid + '&id=' + gid
				}
			}

		},
		// #endif
		methods: {
			//切换tabs
			clickTabs(item) {
				this.current = item.index;
				this.page = 1;
				this.listData = []
				this.getList();
			},
			//跳转
			goTo(item, type) {
				if (type == 1) {
					if (!item.g_num) return uni.showToast({
						title: "当前库存不足",
						icon: "none"
					})
					let json = JSON.stringify(item)
					uni.navigateTo({
						url: '/pages/channel/give/give?json=' + json
					})
				} else if (type == 2) {
					return uni.showToast({
						title: "当前库存不足",
						icon: "none"
					})
				} else {
					if (!item.m_num) return uni.showToast({
						title: "当前库存不足",
						icon: "none"
					})
					uni.navigateTo({
						url: '/pages/channel/goods-detail/goods-detail?type=2&id=' + item.sid
					})
				}
			},
			//搜索
			search() {
				this.page = 1;
				this.getList()
			},
			getImgUrl(url) {
				return setImgUrl(url);
			},
			//列表
			getList() {
				uni.showLoading({
					title: "加载中",
					mask: true
				});
				this.isLoading = true;
				mineGoods().then(res => {
					uni.hideLoading();
					this.listData = res.data;
				})
			},
		},
		onLoad() {
			this.getList();
		},
		onReachBottom() {
			//注意 这里是重要的一步，不满足条件下拉加载不能继续请求数据
			if (!this.isLoading) {
				this.getList();
			}

		},
	}
</script>

<style lang="scss">
	.lb-search {
		padding: 15rpx 32rpx;
	}

	.top-menu {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.lb-box {
		// height: 188rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.16);
		border-radius: 16rpx;
		padding: 12rpx 24rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;

		.lb-item {
			display: flex;
			// align-items: center;

			.lb-left {
				width: 140rpx;
				height: 140rpx;
				flex-shrink: 0;
				padding: 12rpx 0;
			}

			.lb-right {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding-left: 12rpx;

				.lb-name {
					font-size: $main-font-28;
					color: $main-font-color;
				}

				.lb-ratio {
					font-size: $main-font-24;
					color: $main-font-color;

					text {
						color: #F65D40;
					}
				}

				.lb-btn {
					display: flex;
					justify-content: space-between;

					.btn {
						display: flex;
						justify-content: space-evenly;
						align-items: center;
						margin-right: 24rpx;

						image {
							width: 28rpx;
							height: 28rpx;
						}

						width: 140rpx;
						height: 48rpx;
						background: linear-gradient(106deg, #F7583F 0%, #F28F4C 100%);
						border-radius: 24rpx;

						font-size: $main-font-24;
						color: $main-font-color-white;

						&:nth-of-type(2n-1) {
							background: linear-gradient(106deg, #FFC67D 0%, #FF8F35 100%);
						}
					}
				}
			}

		}
	}
</style>